<div
  class="scroll_outermost"
  [style]="{ width: dataObj.width + dataObj.unit, height: dataObj.height + dataObj.unit }"
  #outerMost
  (mouseover)="rollStop('over')"
  (mouseout)="rollStart(60)"
>
  <div [style]="{ width: (dataObj.scrollList.length + 1) * dataObj.width + dataObj.unit, height: '100%' }">
    <div class="outer_box" [style]="{ width: dataObj.scrollList.length * dataObj.width + dataObj.unit }" #outerBox1>
      <div [style]="{ width: dataObj.width + dataObj.unit }" class="inner_item" *ngFor="let item of dataObj.scrollList">{{ item }}</div>
    </div>
    <div class="outer_box" #outerBox2>
      <div [style]="{ width: dataObj.width + dataObj.unit }" class="inner_item">{{ dataObj.scrollList[0] }}</div>
    </div>
  </div>
</div>

<hr>
<app-scroll-up></app-scroll-up>